import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

const textColor = createVar();
const borderColor = createVar();
const backColor = createVar();
const activeTextColor = createVar();
const activeBorderColor = createVar();
const activeBackColor = createVar();
const disableTextColor = createVar();
const disableBorderColor = createVar();
const disableBackColor = createVar();

export const buttonStyle = style({
	display: 'inline-flex',
	flexDirection: 'row',
	gap: '0.5em',
	padding: '0 1em',
	borderRadius: vars.layout.smallRadius,
	minHeight: vars.layout.inputHeight,
	lineHeight: '1rem',
	alignItems: 'center',
	justifyContent: 'center',
	color: fallbackVar(textColor, vars.color.regularText),
	backgroundColor: fallbackVar(backColor, vars.color.infoBackground),
	border: `1px solid ${fallbackVar(borderColor, vars.color.infoLight)}`,
	cursor: 'pointer',
	transition: 'background-color 0.2s, border-color 0.2s, color 0.2s',
	fontSize: '1rem',
	// fontWeight: 'bold',
	boxSizing: 'border-box',
	userSelect: 'none',
	selectors: {
		'&.round': {
			borderRadius: '100rem',
		},
		'&.block': {
			display: 'block',
			margin: '1rem',
			width: 'calc(100% - 2rem)',
		},
		'&::-moz-focus-inner': {
			border: '0',
			padding: '0',
			margin: '0',
		},
		'&[face=primary-outline]': {
			vars: {
				[textColor]: vars.color.brand,
				[backColor]: vars.color.brandBackground,
				[borderColor]: vars.color.brandLight,
				[activeTextColor]: vars.color.buttonText,
				[activeBorderColor]: vars.color.brand,
				[activeBackColor]: vars.color.brand,
				[disableTextColor]: vars.color.brandLight,
				[disableBorderColor]: vars.color.brandLight,
			},
		},
		'&[face=success-outline]': {
			vars: {
				[textColor]: vars.color.success,
				[backColor]: vars.color.successBackground,
				[borderColor]: vars.color.successLight,
				[activeTextColor]: vars.color.buttonText,
				[activeBorderColor]: vars.color.success,
				[activeBackColor]: vars.color.success,
				[disableTextColor]: vars.color.successLight,
				[disableBorderColor]: vars.color.successLight,
			},
		},
		'&[face=warning-outline]': {
			vars: {
				[textColor]: vars.color.warning,
				[backColor]: vars.color.warningBackground,
				[borderColor]: vars.color.warningLight,
				[activeTextColor]: vars.color.buttonText,
				[activeBorderColor]: vars.color.warning,
				[activeBackColor]: vars.color.warning,
				[disableTextColor]: vars.color.warningLight,
				[disableBorderColor]: vars.color.warningLight,
			},
		},
		'&[face=danger-outline]': {
			vars: {
				[textColor]: vars.color.danger,
				[backColor]: vars.color.dangerBackground,
				[borderColor]: vars.color.dangerLight,
				[activeTextColor]: vars.color.buttonText,
				[activeBorderColor]: vars.color.danger,
				[activeBackColor]: vars.color.danger,
				[disableTextColor]: vars.color.dangerLight,
				[disableBorderColor]: vars.color.dangerLight,
			},
		},
		'&[face=primary-text]': {
			vars: {
				[textColor]: vars.color.brand,
				[backColor]: 'transparent',
				[activeTextColor]: vars.color.brandDark,
				[activeBackColor]: 'transparent',
				[disableTextColor]: vars.color.brandLight,
			},
			border: 'none',
		},
		'&[face=success-text]': {
			vars: {
				[textColor]: vars.color.success,
				[backColor]: 'transparent',
				[activeTextColor]: vars.color.successDark,
				[activeBackColor]: 'transparent',
				[disableTextColor]: vars.color.successLight,
			},
			border: 'none',
		},
		'&[face=warning-text]': {
			vars: {
				[textColor]: vars.color.warning,
				[backColor]: 'transparent',
				[activeTextColor]: vars.color.warningDark,
				[activeBackColor]: 'transparent',
				[disableTextColor]: vars.color.warningLight,
			},
			border: 'none',
		},
		'&[face=danger-text]': {
			vars: {
				[textColor]: vars.color.danger,
				[backColor]: 'transparent',
				[activeTextColor]: vars.color.dangerDark,
				[activeBackColor]: 'transparent',
				[disableTextColor]: vars.color.dangerLight,
			},
			border: 'none',
		},
		'&[face=info-text]': {
			vars: {
				[textColor]: vars.color.regularText,
				[backColor]: 'transparent',
				[activeTextColor]: vars.color.primaryText,
				[activeBackColor]: 'transparent',
				[disableTextColor]: vars.color.disabledText,
				[disableBackColor]: 'transparent',
			},
			border: 'none',
		},
		'&[face=info]': {
			vars: {
				[textColor]: vars.color.buttonText,
				[backColor]: vars.color.info,
				[activeTextColor]: vars.color.buttonText,
				[activeBackColor]: vars.color.infoDark,
				[disableTextColor]: vars.color.infoBackground,
				[disableBackColor]: vars.color.infoLight,
				[borderColor]: backColor,
				[activeBorderColor]: activeBackColor,
				[disableBorderColor]: disableBackColor,
			},
			// border: 'none',
		},
		'&[face=primary]': {
			vars: {
				[textColor]: vars.color.buttonText,
				[backColor]: vars.color.brand,
				[activeTextColor]: vars.color.buttonText,
				[activeBackColor]: vars.color.brandDark,
				[disableTextColor]: vars.color.brandBackground,
				[disableBackColor]: vars.color.brandLight,
				[borderColor]: backColor,
				[activeBorderColor]: activeBackColor,
				[disableBorderColor]: disableBackColor,
			},
			// border: 'none',
		},
		'&[face=success]': {
			vars: {
				[textColor]: vars.color.buttonText,
				[backColor]: vars.color.success,
				[activeTextColor]: vars.color.buttonText,
				[activeBackColor]: vars.color.successDark,
				[disableTextColor]: vars.color.successBackground,
				[disableBackColor]: vars.color.successLight,
				[borderColor]: backColor,
				[activeBorderColor]: activeBackColor,
				[disableBorderColor]: disableBackColor,
			},
			// border: 'none',
		},
		'&[face=warning]': {
			vars: {
				[textColor]: vars.color.buttonText,
				[backColor]: vars.color.warning,
				[activeTextColor]: vars.color.buttonText,
				[activeBackColor]: vars.color.warningDark,
				[disableTextColor]: vars.color.warningBackground,
				[disableBackColor]: vars.color.warningLight,
				[borderColor]: backColor,
				[activeBorderColor]: activeBackColor,
				[disableBorderColor]: disableBackColor,
			},
			// border: 'none',
		},
		'&[face=danger]': {
			vars: {
				[textColor]: vars.color.buttonText,
				[backColor]: vars.color.danger,
				[activeTextColor]: vars.color.buttonText,
				[activeBackColor]: vars.color.dangerDark,
				[disableTextColor]: vars.color.dangerBackground,
				[disableBackColor]: vars.color.dangerLight,
				[borderColor]: backColor,
				[activeBorderColor]: activeBackColor,
				[disableBorderColor]: disableBackColor,
			},
			// border: 'none',
		},
		'&:hover,&:active,&:focus,&[checked]': {
			// zIndex: 1,
			color: fallbackVar(activeTextColor, vars.color.buttonText),
			backgroundColor: fallbackVar(activeBackColor, vars.color.info),
			borderColor: fallbackVar(activeBorderColor, vars.color.info),
		},
		'&[disabled]': {
			color: fallbackVar(disableTextColor, vars.color.infoLight),
			backgroundColor: fallbackVar(disableBackColor, 'transparent'),
			borderColor: fallbackVar(disableBorderColor, vars.color.infoLight),
			cursor: 'not-allowed',
		},
		'&[icon-pos=top]': {
			flexDirection: 'column',
			minHeight: '4em',
		},
	},
});

globalStyle(`${buttonStyle} div`, {
	whiteSpace: 'nowrap',
	textOverflow: 'ellipsis',
});

globalStyle(`${buttonStyle} div:empty`, {
	display: 'none',
});

globalStyle(`${buttonStyle} div:first-child`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
});

globalStyle(`${buttonStyle} svg[name=icon]`, {
	fill: textColor,
	width: '1.5em',
	height: '1.5em',
	// marginRight: '0.5em',
});

globalStyle(`${buttonStyle} svg[name=menu]`, {
	fill: textColor,
	width: '1.5em',
	height: '1.5em',
	marginLeft: '-0.1em',
	marginRight: '-0.6em',
});

globalStyle(
	`${buttonStyle}:hover svg[name=icon],${buttonStyle}:active svg[name=icon],${buttonStyle}:focus svg[name=icon],${buttonStyle}[checked] svg[name=icon]`,
	{
		fill: activeTextColor,
	}
);

globalStyle(`${buttonStyle}[disabled] svg[name=icon]`, {
	fill: fallbackVar(disableTextColor, vars.color.infoLight),
});
